<template>
  <div class="pagination">
    <span :class="{'pagination_disabled': current === 1}" @click="setCurrent(current - 1)" class="pagination_item"></span>
    <!-- <span :class="{'disabled': current == 1}" @click="setCurrent(1)" class="pagination_item"> 首页 </span> -->
    <span :class="{'pagination_active': current === p.val}" @click="setCurrent(p.val)" v-for="p in grouplist" v-bind:key="p.id" class="pagination_item"> {{ p.text }} </span>
    <!-- <span :class="{'disabled': current == page}" @click="setCurrent(page)" class="pagination_item"> 尾页 </span> -->
    <span :class="{'pagination_disabled': current === page - 1}" @click="setCurrent(current + 1)" class="pagination_item"> > </span>
  </div>
</template>

<script>
export default {
  data () {
    return {
      current: this.currentPage
    }
  },
  props: {
    // 从父组件传递参数到此组件:total(数据总条数), display(每页显示条数), currentPage(当前页码),pagegroup(分页条数)
    total: {
      type: Number,
      default: 0
    },
    display: {
      type: Number,
      default: 10
    },
    currentPage: {
      type: Number,
      default: 1
    },
    pagegroup: {
      type: Number,
      default: 10,
      coerce: function (v) {
        v = v > 0 ? v : 10
        return v % 2 === 1 ? v : v + 1
      }
    }
  },
  computed: {
    // 总页数
    page: function () {
      return Math.ceil(this.total / this.display)
    },
    // 获取分页页码
    grouplist: function () {
      var len = this.page; var temp = []; var list = []; var count = Math.floor(this.pagegroup / 2); var center = this.current
      if (len <= this.pagegroup) {
        while (len--) {
          temp.push({ text: this.page - len, val: this.page - len })
        }
        ;
        return temp
      }
      while (len--) {
        temp.push(this.page - len)
      }
      ;
      var idx = temp.indexOf(center);
      (idx < count) && (center = center + count - idx);
      (this.current > this.page - count) && (center = this.page - count)
      temp = temp.splice(center - count - 1, this.pagegroup)
      do {
        var t = temp.shift()
        list.push({
          text: t,
          val: t
        })
      } while (temp.length)
      if (this.page > this.pagegroup) {
        (this.current > count + 1) && list.unshift({ text: '...', val: list[0].val - 1 });
        (this.current < this.page - count) && list.push({ text: '...', val: list[list.length - 1].val + 1 })
      }
      return list
    }
  },
  methods: {
    setCurrent: function (idx) {
      if (this.current !== idx && idx > 0 && idx < this.page + 1) {
        this.current = idx
        this.$emit('pagechange', this.current)
      }
    }
  }
}
</script>
<style>
.pagination {
  display: flex;
  justify-content: center;
}
.pagination_item {
  width: 35px;
  height: 35px;
  font-size: 20px;
  color: #ffffff;
  background:rgba(55, 92, 112, 0.8);
  border-radius: 4px;
  cursor: pointer;
  margin: 0 6px;
  text-align: center;
  line-height: 35px;
}
/* 禁用按钮 */
.pagination_disabled {
  /* display: none; */
  opacity: 0.6;
  cursor: default;
}
/* 选中按钮 */
.pagination_active {
  background: #4D8DAF;
}
</style>
